<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,maximum-scale=1">
	<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">
	<title>纯JavaScript炫酷鼠标滑过图片放大镜特效插件</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" media="screen, projection" href="dist/luminous-basic.css">
	<style type="text/css">
      .wrapper {
		  margin: 2em auto 0 auto;
		  width: 600px;
		}

		.demo-trigger {
		  display: inline-block;
		  width: 30%;
		  float: left;
		}

		.demo-trigger img {
		  max-width: 100%;
		}

		.detail {
		  position: relative;
		  width: 65%;
		  margin-left: 5%;
		  float: left;
		}

		p, ul {
		  max-width: 32em;
		  margin-bottom: 1em;
		  line-height: 1.6em;
		}

		.ix-link {
		  display: block;
		  margin-bottom: 1em;
		}
		button {
		  margin-left: 10px;
		  font-size: 14px;
		  border-radius:5px;
		}
		h3 {
		  margin-top: 0;
		}

		@media (max-width: 620px) {
		  .wrapper {
		    width: auto;
		  }

		  .detail, .demo-trigger {
		    float: none;
		  }

		  .demo-trigger {
		    max-width: 100%;
		    width: auto;
		    margin: 0 auto;
		  }

		  .detail {
		    margin: 0;
		    width: auto;
		  }

		  p {
		    margin: 0 auto 1em;
		  }

		  .responsive-hint {
		    display: none;
		  }
		  h3 {
		    margin-top:20px;
		  }
		}
    </style>
</head>
<body>
	<header class="htmleaf-header">
		<div class="htmleaf-demo center">
		  <a href="index.html" class="current">Luminous</a>
		  <a href="index3.html">Luminous+Drift</a>
		  <a href="index4.html">特殊效果</a>
		</div>
	</header>
	<section class="htmleaf-container">
		<div class="wrapper">
		  <a class="demo-trigger" href="img/wristwatch.jpg">
		    <img src="img/wristwatch-thumb.jpg">
		  </a>
	</section>
	
	
	<script src="dist/Luminous.min.js"></script>
    <script>
      	var demoTrigger = document.querySelector('.demo-trigger');
		new Luminous(demoTrigger);
    </script>
</body>
</html>